<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手写签名2</title>
    <style>
        body {
            margin: 0;
        }
        #cvs {
            display: block;
            background-color: #dddddd;
        }
        .btn {
            position: absolute;
            top: 0;
        }
        .p2 {
            left: 50px
        }
    </style>
</head>
<body>
    <button class="btn" onclick="onRotate()">旋转</button>
    <button class="btn p2" onclick="onDownload()">下载</button>
    <canvas id="cvs" width="400" height="300"></canvas>
    <script>
        const cvs = document.getElementById('cvs')
        const ctx = cvs.getContext('2d')
        let isDrawing = false
        const onRotate = () => {
            const { width, height } = cvs
            const img = new Image()
            img.src = cvs.toDataURL('image/png')
            img.onload = () => {
                cvs.width = height
                cvs.height = width
                ctx.translate(cvs.width, 0)
                ctx.rotate(Math.PI / 180 * 90)
                ctx.drawImage(img, 0, 0)
            }
        }
        const onDownload = async () => {
            const a = document.createElement('a')
            a.setAttribute('download', 'name.png')
            const res = await fetch(cvs.toDataURL('image/png'))
            const blob = await res.blob()
            a.href = URL.createObjectURL(blob)
            a.click()
        }
        const addEvents = (cvs, name, call) => {
            const isMobile = navigator.userAgent.match(/Mobile/)
            const mobileNameObj = {
                'mousedown': 'touchstart',
                'mousemove': 'touchmove',
                'mouseup': 'touchend'
            }
            if (isMobile) {
                cvs.addEventListener(mobileNameObj[name], e => {
                    call(e.touches[0])
                })
            } else {
                cvs.addEventListener(name, e => {
                    call(e)
                })
            }
        }
        addEvents(cvs, 'mousedown', e => {
            isDrawing = true
            ctx.moveTo(e.pageX, e.pageY)
        })
        addEvents(cvs, 'mousemove', e => {
            if (isDrawing) {
                ctx.lineWidth = 5
                ctx.lineTo(e.pageX, e.pageY)
                ctx.stroke()
            }
        })
        addEvents(cvs, 'mouseup', e => {
            isDrawing = false
        })
    </script>
</body>
</html>